<template>

	<view v-if="hasdata">

		{{info.pageBean}}
		<view style="padding: 6%;">
			<view class="" id="eleInfo"></view>
			<!-- 发帖人头像和昵称 -->
			<view class="faburen">
				<image class="praised" :src="tools.userlogo(info.uid)"></image>
				<text>{{info.user.tbUserInfo.nickname }}</text>
			</view>

			<!-- 帖子的标题区域 -->
			<view>
				<text style="font-size: 200%;">{{info.title}}</text>
				<view class="line"></view>
				<rich-text :nodes="info.info"></rich-text>
			</view>

			<!-- 分割线 -->
			<view class="line1" id="comments-section"></view>
			<view class="" id="eleReply"></view>
			<!-- 排序导航栏 -->
			<uni-segmented-control :current="order" :values="orders" @clickItem="changeOrder"></uni-segmented-control>

			<view class="" v-if="replies && replies.length>0">
				<!-- 评论的区域 -->
				<view v-for="comment in replies" :key="comment.mrid" class="content">

					<!-- 评论用户的头像和昵称 -->
					<view style="display: flex;">
						<image class="praised" :src="tools.userlogo(comment.uid)"></image>
						<text>{{ comment.user.tbUserInfo.nickname }}</text>
					</view>

					<!-- 评论的内容和时间 -->
					<text>{{ comment.info }}</text>
					<text class="shijian">{{tools.formatDate(comment.lastupdate)}}</text>

				</view>
			</view>
			<!-- 没得评论时显示这个 -->
			<view v-else>
				<image class="sofa-image" :src="pics.shafa"></image>
				<text class="soft">快来抢沙发吧!</text>
			</view>

			<!-- 加载更多 -->
			<uni-load-more :status="more" :content-text="moreText" @clickLoadMore="loadMore"></uni-load-more>
			<!-- 底部导航栏的区域 -->
			<view class="dibu">
				<!-- 点这块可以刷新 -->
				<view class="dibu1">
					<image @click="requery" class="praised" :src="pics.sx"></image>
					<text class="shuzi">刷新</text>
				</view>

				<!-- 帖子回复量 -->
				<view class="dibu1">
					<image class="praised" :src="pics.huifu" @click="scrollToComments"></image>
					<text class="shuzi"> {{info.reply}}</text>
				</view>

				<!-- 帖子点赞量 -->
				<view @click="likePost" class="dibu1">
					<image class="praised" v-if="info.exInfo.praised" :src="pics.dianzan1"></image>
					<image class="praised" v-if="!info.exInfo.praised" :src="pics.dianzan"></image>
					<text class="shuzi">{{ info.praise }}</text>
				</view>

			</view>

		</view>

	</view>

	<view v-else class="loading-container">
		<image class="loading-icon" :src="pics.jiazai"></image>
		<text>加载中...</text>
	</view>

</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const hasdata = ref(false)
	// url图片
	import {
		storeToRefs
	} from 'pinia'
	import logosStore from '@/store/logos.js'

	const {
		pics
	} = storeToRefs(logosStore())

	// const eleReply = ref(null)
	// const eleInfo = ref(null)

	const hrefs = ['#eleInfo', '#eleReply']
	onLoad((event) => {
		console.log('加载信息：', event)
		mid.value = event.mid
		requery();
	})

	import {
		ref,
		nextTick
	} from 'vue'
	import {
		api,
		tools
	} from '../../api/api.js'

	const mid = ref(-1)
	const info = ref({})
	const replies = ref([])

	const more = ref('more')
	const moreText = ref({
		contentdown: "点击加载更多",
		contentrefresh: "正在加载中...",
		contentnomore: "我是有底线的"
	})

	const page = ref({
		pageSize: 5,
		pageNumber: 1
	})

	const order = ref(0)
	const orders = ref(['发布时间', '最高热评'])

	const changeOrder = (event) => {
		page.value.pageNumber = 1
		order.value = event.currentIndex
		info.value = {}
		replies.value = []
		query(() => {
			console.log('查询回调。。。。', order.value)
			nextTick(() => {
				setTimeout(() => {
					uni.pageScrollTo({
						duration: 0,
						selector: hrefs[1]
					})
				}, 500)

			})
		})
	}

	const loadMore = () => {
		page.value.pageNumber++;
		if (page.value.pageNumber > page.value.pageCount) {
			more.value = 'noMore'
			return
		}
		query()
	}

	const requery = () => {
		page.value.pageNumber = 1
		info.value = {}
		replies.value = []
		query()
	}

	const query = (cb) => {
		more.value = 'loading'
		api.get(`/message/${mid.value}/${page.value.pageSize}/${page.value.pageNumber}/${order.value +1}`, {}, (
			data) => {
			if (data.success) {
				more.value = 'more'
				let newinfo = data.data.data
				let newreplies = data.data.data.replies
				delete newinfo.replies
				info.value = newinfo
				replies.value = replies.value.concat(newreplies)
				page.value = data.data.pageBean

			} else {
				uni.showToast({
					title: data.message
				})
			}
			hasdata.value = data.success
			if (cb) {
				cb()
			}
		})
	}

	const scrollToComments = () => {
		const commentsSection = document.getElementById('comments-section');
		if (commentsSection) {
			commentsSection.scrollIntoView({
				behavior: 'smooth'
			});
		}
	}

	const likePost = () => {
		uni.showLoading({
			title: '点赞处理中……'
		})
		api.post(`/message/praise/${mid.value}`, {}, (data) => {
			uni.hideLoading()
			if (data.success) {
				info.value.exInfo.praised = !info.value.exInfo.praised
				if (info.value.exInfo.praised) {
					info.value.praise++
				} else {
					info.value.praise--
				}
			} else {
				uni.showToast({
					content: data.message
				})
			}
		})
	}
</script>

<style>
	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: rgba(255, 255, 255, 0.8);
	}

	.loading-icon {
		display: flex;
		width: 50px;
		height: 50px;
		margin-right: 10px;
	}

	.praised {
		margin-right: 2%;
		width: 25px;
		height: 25px;
	}

	.faburen {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 5%;
	}

	.line {
		margin: 2%;
		border: 1px solid #9c9c78;
		width: 93%;
	}

	.line1 {
		margin-top: 10%;
		margin-bottom: 20%;
		border: 1px solid #9c9c78;
		width: 100%;
	}

	.dibu {
		position: fixed;
		bottom: 10px;
		right: 1px;
	}

	.dibu1 {
		display: flex;
		align-items: center;
		margin-bottom: 10%;
	}

	.shuzi {
		font-size: 1%;
	}

	.content {
		font-family: 'Arial', sans-serif;
		font-size: 16px;
		color: #333;
		margin: 10px;
		padding: 10px;
		background-color: #f9f9f9;
		border-radius: 25px;
		word-wrap: break-word;
		max-width: 800px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		margin-top: 5%;
	}

	.sofa-image {
		width: 400px;
		height: 250px;
	}

	.soft {
		font-size: 58px;
		opacity: 0.1;
		margin: 10px 0;
	}

	.shijian {
		display: flex;
		font-size: 1px;
		margin-right: 30%;
		margin-top: 10%;
	}

	.huifu {
		display: flex;
		justify-content: end;
		margin-top: -6%;
	}
</style>